<template>
  <card>
    <div class="flexCSB">
      <Button type="primary" @click="create">新增分馆</Button>
      <div slot="title" v-if="$store.state.superAdmin == 'true'">
        <Select
          style="width:100%"
          v-model="museumId"
          filterable
          @on-change="getPavilionAreaForBack"
        >
          <template v-for="item in museumList">
            <Option :value="item.id">{{item.name}}</Option>
          </template>
        </Select>
      </div>
    </div>
    <Spin fix size="large" v-if="loading1"></Spin>
    <Table class="table" highlight-row :columns="columns" :data="data"></Table>
    <Modal width="50" v-model="modal" title="分馆操作">
      <Form ref="form" :model="newData" :label-width="100">
        <FormItem label="分馆名称：">
          <Input placeholder="请输入分馆名称" v-model="newData.name" clearable></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="dashed" class="Button" @click="modal = false">取消</Button>
        <Button class="Button" type="primary" @click="submit" :loading="loading2">提交</Button>
      </div>
    </Modal>
  </card>
</template>

<script>
export default {
  data() {
    return {
      loading1: false,
      loading2: false,

      museumId: "",
      museumList: [],
      columns: [
        { title: "分馆名称", key: "name", align: "center" },
        { title: "id", key: "id", align: "center" },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  style: {
                    marginRight: "10px"
                  },
                  props: {
                    type: "warning"
                  },
                  on: {
                    click: () => {
                      this.update(params);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error"
                  },
                  on: {
                    click: () => {
                      this.del(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [],
      modal: false,
      newData: {
        name: ""
      },
      id: ""
    };
  },
  created() {
    if (this.$store.state.superAdmin == "true") {
      this.getMuseumList();
    } else {
      this.museumId = this.$store.state.museumId;
      this.getPavilionAreaForBack();
    }
  },
  methods: {
    getMuseumList() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getPavilionAreaForBack();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    getPavilionAreaForBack() {
      this.loading1 = true;
      this.$http(
        "/stage/reservation/getPavilionAreaForBack",
        {
          museumId: this.museumId
        },
        "get",
        res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    create() {
      this.id = "";
      this.newData = {
        name: ""
      };
      this.modal = true;
    },
    update(params) {
      this.newData = {
        name: params.row.name
      };
      this.id = params.row.id;
      this.modal = true;
    },
    submit() {
      if (this.newData.name == "") {
        this.$Message.error("请填写分馆名称");
        return false;
      }
      let data = {};
      if (this.id == "") {
        data = {
          name: this.newData.name
        };
      } else {
        data = {
          name: this.newData.name,
          id: this.id
        };
      }
      this.loading2 = true;
      this.$http(
        "/stage/reservation/saveOrUpdatePavilionArea",
        data,
        "post",
        res => {
          if (res.data.code == 200) {
            this.$Message.success("提交成功");
            this.modal = false;
            this.getPavilionAreaForBack();
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading2 = false;
        }
      );
    },
    del(params) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要删除此分馆吗？</p>",
        onOk: () => {
          this.loading1 = true;
          this.$http(
            "/stage/reservation/deletePavilionArea",
            {
              id: params.row.id
            },
            "get",
            res => {
              if (res.data.code == 200) {
                this.$Message.success("删除分馆成功");
                this.getPavilionAreaForBack();
              } else {
                this.$Message.error(res.data.msg);
              }
              this.loading1 = false;
            }
          );
        },
        onCancel: () => {}
      });
    }
  }
};
</script>

<style scoped>
</style>
